<template>
  <div :ref="info._id" v-ui-ref="vSetRef" class="mr-1" :class="[{ hidden: conditionProperty.hidden }]">
    <template v-if="hasDropdownOption">
      <el-dropdown :disabled="conditionProperty.disabled" trigger="click">
        <el-button
          :circle="info.extension.circle.value"
          :plain="info.extension.plain.value"
          :round="info.extension.round.value"
          size="mini"
          :type="info.extension.type.value"
        >
          <vui-icon v-if="info.extension.icon.value" :icon="info.extension.icon.value" />
          {{ info.extension.btnName.value }}
          <vui-icon icon="arrow-down-s-line" />
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in info.extension.dropdownOption.value" :key="index" @click="click(item)">
              {{ item.key }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <template v-else>
      <el-button
        :circle="info.extension.circle.value"
        :disabled="conditionProperty.disabled"
        :loading="loading"
        :plain="info.extension.plain.value"
        :round="info.extension.round.value"
        size="mini"
        :type="info.extension.type.value"
        @click="click()"
      >
        <vui-icon v-if="info.extension.icon.value" :icon="info.extension.icon.value" />
        {{ getBtnName }}
      </el-button>
    </template>
    <VuiModal v-if="showModal" v-model="showModal">
      <template #title>{{ translateTitle('Ve.elements.提示') }}</template>
      <div class="special-situation-detail-content"></div>
    </VuiModal>
  </div>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'

  import request from '@/utils/request'
  import { print } from '@ve/utils/print'
  import { webapp_ws_create } from '@ve/utils/print/grwebapp'
  import { GFCD } from '@/utils/utils'
  import isArray from 'lodash/isArray'
  export default defineComponent({
    name: 'UiPrint',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        loading: false,
        showModal: false,
      }
    },
    computed: {
      getDropdownOptionValue() {
        return this.info.extension.dropdownOption.value
      },
      hasDropdownOption() {
        return this.getDropdownOptionValue.length > 1
      },
      getBtnName() {
        if (this.getDropdownOptionValue.length === 1) {
          return this.getDropdownOptionValue[0]['key']
        } else {
          return this.info.extension.btnName.value
        }
      },
    },
    methods: {
      translateTitle,
      click(ops) {
        console.log('测试打印开始-点击', ops)
        let create = webapp_ws_create(
          () => {},
          (value, newNode) => {
            console.log('测试打印开始', newNode)
            if (value === false) {
              this.showModal = true
              this.$nextTick(() => {
                console.log(document.querySelector('.special-situation-detail-content'))
                if (document.querySelector('.special-situation-detail-content')?.childNodes.length > 0) return
                document.querySelector('.special-situation-detail-content')?.appendChild(newNode)
              })
            }
          }
        )
        console.log(create)

        console.log('测试打印 -正确')
        if (!this.hasPreview) {
          console.log('预览模式不运行 onDbClick')
          return
        }
        if (ops == undefined && this.getDropdownOptionValue.length <= 0) {
          console.log('请配置打印参数')
          return
        }
        if (ops == undefined && this.getDropdownOptionValue.length === 1) {
          ops = this.getDropdownOptionValue[0]
        }
        this.runEventTask('onPrintClick', {
          data: ops,
        })
      },
      $handlePrint(ops) {
        console.log('ops====', ops)
        if (this.loading) {
          console.log('请求中')
          return
        }
        let menuName = this.$route.meta.title || this.$route.query.name
        this.loading = true
        let api = this.info.extension.api.value
        let method = this.info.extension.method.value
        let _data = {
          REPORT_CODE: ops.data.value,
          selectData: isArray(ops.table) ? ops.table : [ops.table],
          PRINTTYPE: 'manual',
          MENU_NAME: menuName,
          PRINT_RESOURCE: `${menuName}->${ops.data.key}`,
        }

        return request({
          url: GFCD('dams', 'domain') + api,
          method: 'post',
          data: {
            data: JSON.stringify(_data),
            method: method,
          },
        })
          .then((res) => {
            this.loading = false
            console.log('测试打印数据', res.data)
            //解密
            // console.log(decryptd(res))
            print(res.data, this)
          })
          .catch(() => {
            this.loading = false
          })
      },
    },
  })
</script>
<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    display: flex;
    align-items: center;
  }
</style>
